<template>
  <!-- 签约管理 * 待签约列表 -->
  <div>
    <div class="lhy_publish_top_One">
      <!-- 第一行 - 签约  -->
      <div style="border-bottom: 1px dashed #efefef" class="lhy_One">
        <div class="display">
          <b class="lhy_b">签约状态</b>
          <el-select
            style="margin-right: 15px; width: 170px"
            v-model="value"
            class="m-2"
            placeholder="请选择签约状态"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="display">
          <b class="lhy_b">签约机构</b>
          <el-select
            style="margin-right: 15px; width: 170px"
            v-model="value"
            class="m-2"
            placeholder="请选择签约机构"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="display">
          <b class="lhy_b">医生团队</b>
          <el-select
            style="margin-right: 15px; width: 170px"
            v-model="value"
            class="m-2"
            placeholder="请选择医生团队"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="display">
          <b class="lhy_b">服务包</b>
          <el-select
            style="margin-right: 15px; width: 170px"
            v-model="value"
            class="m-2"
            placeholder="请选择服务包"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <!-- 第二行 - 选择日期 -->
      <div class="lhy_One">
        <b class="lhy_b">选择日期</b>
        <div class="display">
          <el-select
            style="margin-right: 15px; width: 430px"
            v-model="value"
            class="m-2"
            placeholder="请选择时间"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="display">
          <el-button type="primary">查询</el-button>
          <el-button @click="onBatchExport">导出</el-button>
        </div>
      </div>

      <!-- table表格 -->
      <el-table
        :data="ebooks1.books.slice((pages - 1) * pageSize, pages * pageSize)"
        style="width: 100%"
      >
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column type="index" label="编号" width="55">
        </el-table-column>
        <el-table-column property="name" label="签约人姓名" width="120" />
        <el-table-column property="ID" label="身份证号" show-overflow-tooltip />
        <el-table-column property="mobile" label="手机号" width="120" />

        <el-table-column
          property="team.name"
          label="签约医生团队"
          width="120"
        />

        <el-table-column property="serve.name" label="签约服务包" width="120" />

        <el-table-column property="state" label="签约状态" width="120">
          <template #default="scope">
            <el-tag v-if="scope.row.state" type="success">已签约</el-tag>
            <el-tag v-else type="danger">未签约</el-tag>
          </template>
        </el-table-column>

        <el-table-column property="time" label="申请时间" width="120" />

        <el-table-column label="操作" width="120">
          <a style="margin-right: 10px">查询详情</a>
          <a>编辑</a>
        </el-table-column>
      </el-table>
      <div style="margin-top: 15px">
        <el-pagination
          @update:current-page="changePage"
          v-model:current-page="page"
          background
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="ebooks1.books.length"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { ElTable } from "element-plus";
import axios from "axios";
import request from "@/request";
import * as XLSX from "xlsx";

/* 渲染数据的 */
let ebooks1 = reactive({
  books: [],
});
let getDate = () => {
  axios.get("http://localhost:3461/api/sign").then((res) => {
    // console.log(res.data.data);
    ebooks1.books = res.data.data;
    console.log(ebooks1.books, "156");
  });
};
onMounted(() => {
  getDate();
});

// 当前页
let pages = ref(1);
// 每页显示条数
let pageSize = 5;
// 更改页数
let changePage = (page) => {
  console.log(page);
  pages.value = page;
  console.log(pages);
};

/* 导出数据的 */
const tableData = reactive({
  books: [],
});; //用来存放导出的数据
const onBatchExport = () => {
  console.log(tableData.books);
  axios({
    url: "http://localhost:3461/api/sign", // url
    params: {},
  })
    .then(function (res) {
      console.log(res.data.data,'182'); // 成功回调
      tableData.books = res.data.data; //将获取到的数据赋给声明的数组
      const data = XLSX.utils.json_to_sheet(tableData.books); //此处tableData.value为表格的数据
      console.log(data,'188');
      const dc = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(dc, data, "test-data"); //test-data为自定义的sheet表名
      XLSX.writeFile(dc, "test.xlsx"); //test.xlsx为自定义的文件名
    })
    .catch(function (err) {
      console.log(err); // 失败回调
    });
};

</script>

<style lang="scss" scoped>
.display {
  display: inline-block;
}

/* 发布单位的最外层框 */
.lhy_publish_top {
  margin-top: 6px;
  width: 100%;
  background-color: #f0f0f0;
  height: 75vh;
  z-index: 100;
  text-align: center;
}

/* 发布单位 - 发布单位行 */
.lhy_publish_top_One {
  text-align: left;
  width: 95%;
  /* padding: 15px; */
  background-color: white;
  margin-top: 25px;
  display: inline-block;
}

.lhy_b {
  margin-right: 20px;
}

.span {
  padding: 5px 20px;
  font-weight: 550;
  color: #6e6e6e;
}

.lhy_One {
  padding: 18px 0;
  margin: 0 25px;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>